<template>
    <div class="content">
        <Spin size="large" fix v-if="loading"> </Spin>
        <div class="demo-tabs-style1">
            <Tabs type="card" @on-click="clickTabs" v-model="cardName">
                <Button @click="resetData(false); " size="small" slot="extra">重置筛选</Button>
                <TabPane label="全部" name="-1">
                    <div>
                        <div>
                            <span class="typeName">食材类型</span>
                            <CheckboxGroup v-model="form.foodClass" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in foodClassList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">菜肴类型</span>
                            <CheckboxGroup v-model="form.tuletype" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in tuletypeList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">烹饪类型</span>
                            <CheckboxGroup v-model="form.kind" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in kindList" :key="index"></Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">烹饪味道</span>
                            <CheckboxGroup v-model="form.flavour" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in flavourList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="大锅菜" name="0">
                    <div>
                        <div>
                            <span class="typeName">食材类型</span>
                            <CheckboxGroup v-model="form.foodClass" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in foodClassList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">菜肴类型</span>
                            <CheckboxGroup v-model="form.tuletype" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in tuletypeList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">烹饪类型</span>
                            <CheckboxGroup v-model="form.kind" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in kindList" :key="index"></Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">烹饪味道</span>
                            <CheckboxGroup v-model="form.flavour" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in flavourList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="主食" name="1">
                    <div>
                        <div>
                            <span class="typeName">菜肴类型</span>
                            <CheckboxGroup v-model="form.tuletype" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in tuletypeList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                        <div>
                            <span class="typeName">烹饪类型</span>
                            <CheckboxGroup v-model="form.kind" style="margin:10px 0  15px;">
                                <Checkbox :label="item.value" v-for="(item, index) in kindList" :key="index"></Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="小菜" name="2">
                    <div>
                        <div>
                            <span class="typeName">菜肴类型</span>
                            <CheckboxGroup v-model="form.tuletype" style="margin:10px 0  15px;">
                                <Checkbox :label="item.dishCategory" v-for="(item, index) in tuletypeList" :key="index">
                                </Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
        <div class="content-bottom" id="itemBox">
            <div class="content-bottom-item" style="margin-right:20px">
                <div class="btnBox">
                    <div class="btnBox-left">
                        <div style="display:flex">
                            <Input v-model="leftFoodName" placeholder="输入菜肴名称搜索" clearable class="mr_10" />
                            <cusButton type="primary" @onClick="onSearch(cardName)">查询</cusButton>
                        </div>
                        <div style="font-size:14px;margin-left:10px">可选择菜肴数量：{{ data.length }} 个</div>
                    </div>
                    <div style="display: flex; align-items: center; cursor: pointer" @click="switchOrder">
                        <Icon type="md-swap" size="26" style="height: 26px;" />
                        <span>{{ showOrderingData ? '点餐菜肴' : '全部菜肴' }}</span>

                    </div>

                </div>
                <orderingData v-if="showOrderingData" @changeTab="changeOrderTime" @addDishes="addDishes" :dishData="data" :height="itemHeight[cardNum] - 141"></orderingData>
                <div v-else class="dishesBox" style="overflow:hidden;overflow-y: auto;"
                    :style="{ height: `${itemHeight[cardNum] - 110}px` }">
                    <Tag type="border" color="primary" v-for="(item, index) in data" :key="index"
                        style="margin-right:10px;margin-bottom:10px;cursor:pointer">
                        <div @click="addDishes(item)">{{ item.dishName }}</div>
                    </Tag>
                </div>
                <div style="height:30px;line-height:30px">*鼠标左键添加菜肴</div>
            </div>
            <div class="content-bottom-item">
                <div class="btnBox">
                    <div class="btnBox-left">
                        <div style="font-size:14px;margin-left:10px">已选菜肴数量：{{ rightData.length }} 个</div>
                    </div>
                    <div style="display:flex">
                        <cusButton class="mr_10" @onClick="aiCreat()">随机生成星期和餐次</cusButton>
                        <Poptip confirm title="是否确认删除全部已选菜肴？" width="230" @on-ok="rightData = []">
                            <cusButton type="error" class="mr_10">全部删除</cusButton>
                        </Poptip>
                        <cusButton @onClick="saveBtn()" type="primary">保存</cusButton>
                    </div>
                </div>
                <div class="table">
                    <div class="table-item" style="width:70px">序号</div>
                    <div class="table-item">菜肴名称</div>
                    <div class="table-item">菜肴类型</div>
                    <div class="table-item">星期</div>
                    <div class="table-item">餐次</div>
                    <div class="table-item noBr">操作</div>
                </div>
                <div class="dishesBox" style="overflow:hidden;overflow-y: auto;border-radius:0px;padding:0;"
                    :style="{ height: `${itemHeight[cardNum] - 140}px!important` }">
                    <div v-if="showRigth && rightData.length">
                        <div class="table" v-for="(item, index) in rightData" :key="index"
                            style="background:#FFFFFF;border-left:none;border-right:none;border-top:none;height:60px">
                            <div class="table-item" style="width:70px">{{ index + 1 }}</div>
                            <div class="table-item">{{ item.dishName }}</div>
                            <div class="table-item">{{ item.dishType }}</div>
                            <div class="table-item">
                                <Select v-model="rightData[index].week" style="width:100px">
                                    <Option value="one">星期一</Option>
                                    <Option value="two">星期二</Option>
                                    <Option value="three">星期三</Option>
                                    <Option value="four">星期四</Option>
                                    <Option value="five">星期五</Option>
                                    <Option value="six">星期六</Option>
                                    <Option value="seven">星期日</Option>
                                </Select>
                            </div>
                            <div class="table-item">
                                <Select v-model="rightData[index].mealTimes" style="width:100px">
                                    <Option value="早餐">早餐</Option>
                                    <Option value="午餐">午餐</Option>
                                    <Option value="晚餐">晚餐</Option>
                                </Select>
                            </div>
                            <div class="table-item noBr">
                                <div style="color:red;cursor:pointer" @click="rightData.splice(index, 1)">删除</div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="height:80px;text-align:center;line-height:80px">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { selectdishtypeattribute, selectbydish, selectbyCommentDish, selectWeekOrderDishs, saveOrderDishs } from "@/api/business/dishesModule";
import { mapMutations } from 'vuex'
import orderingData from './components/orderingData.vue'
export default {
    components: { orderingData },
    data() {
        return {
            cardName: '0',
            cardNum: 0,
            orderTime: 'week',
            loading: false,
            foodClassList: [], // 食材类型
            tuletypeList: [], // 菜肴类型
            kindList: [], // 烹饪类型
            flavourList: [], // 烹饪味道
            dishminuteList: [], // 烹饪时间
            colourList: [], // 颜色
            showOrderingData: false,
            form: {
                foodClass: [],
                tuletype: [],
                kind: [],
                flavour: [],
                dishminute: [],
                colour: []
            },
            handlerId: '',
            leftFoodName: '',
            data: [],
            rightData: [],
            itemHeight: [0, 0, 0],
            showRigth: false,
            weeksArr: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
            mealTimesArr: ['早餐', '午餐', '晚餐']
        };
    },
    mounted() {
        this.selectdishtypeattributeApi();
        this.selectWeekOrderDishsApi()

    },
    filters: {
        weekName(week) {
            let name = "";
            if (week == 'one') {
                name = '星期一'
            }
            if (week == 'two') {
                name = '星期二'
            }
            if (week == 'three') {
                name = '星期三'
            }
            if (week == 'four') {
                name = '星期四'
            }
            if (week == 'five') {
                name = '星期五'
            }
            if (week == 'six') {
                name = '星期六'
            }
            if (week == 'seven') {
                name = '星期天'
            }
            return name
        }
    },
    methods: {
        ...mapMutations([
            'setTagNavList'
        ]),
        changeOrderTime(time) {
            this.orderTime = time
    this.selectbyCommentDishApi()
        },
        // 获取属性列表
        selectdishtypeattributeApi(type = 0) {
            this.resetData();
            return new Promise((resolve) => {
                this.loading = true;
                this.showRigth = false;
                selectdishtypeattribute({
                    type: type
                }).then((res) => {
                    this.loading = false;
                    if (res.retCode == 2000) {
                        if (this.showOrderingData) {
                this.selectbyCommentDishApi(type)
          
            } else {
                this.selectbydishApi(type)
            }
                        if (type == 0 || type == -1) {
                            this.foodClassList = res.data.foodClass;
                            this.tuletypeList = res.data.tuletype;
                            this.kindList = res.data.kind;
                            this.flavourList = res.data.flavour;
                        }
                        if (type == 1) {
                            this.tuletypeList = res.data.tuletype;
                            this.kindList = res.data.kind;
                        }
                        if (type == 2) {
                            this.tuletypeList = res.data.tuletype;
                        }
                        this.$nextTick(() => {
                            this.cardNum = parseInt(type)
                            if (!this.itemHeight[this.cardNum]) {
                                this.itemHeight[this.cardNum] = document.getElementById("itemBox").offsetHeight;
                            }
                            this.showRigth = true
                            console.log(this.itemHeight)
                        })
                        resolve();
                    }
                });
            });
        },
        // 切换点餐
        switchOrder() {
            this.data = []
            cancelAnimationFrame(this.handlerId);
            if (this.showOrderingData) {
                this.selectbydishApi()
            } else {
                this.selectbyCommentDishApi()
            }
            this.showOrderingData = !this.showOrderingData

        },
        onSearch(cardName) {
            console.log(this.showOrderingData);
            this.data = []
            cancelAnimationFrame(this.handlerId);
            if (this.showOrderingData) {
                this.selectbyCommentDishApi(cardName)
          
            } else {
                this.selectbydishApi(cardName)
            }
        },
        // 获取右侧数据
        selectWeekOrderDishsApi(type = 0) {
            this.resetData();
            return new Promise((resolve) => {
                selectWeekOrderDishs({}).then((res) => {
                    if (res.retCode == 2000) {
                        this.rightData = res.data;
                        resolve();
                    }
                });
            });
        },
        // 获取左侧数据
        selectbydishApi(type = 0) {
            this.data = []
            cancelAnimationFrame(this.handlerId);
            return new Promise((resolve) => {
                // this.loading = true;
                let flavourArr = [];
                this.form.flavour.forEach(item => {
                    this.flavourList.forEach(it => {
                        if (it.value == item) {
                            flavourArr.push(it)
                        }
                    })
                })
                let kindArr = [];
                this.form.kind.forEach(item => {
                    this.kindList.forEach(it => {
                        if (it.value == item) {
                            kindArr.push(it)
                        }
                    })
                })
                let tuletypeArr = [];
                this.form.tuletype.forEach(item => {
                    this.tuletypeList.forEach(it => {
                        if (it.value == item) {
                            tuletypeArr.push(it)
                        }
                    })
                })
                let foodClassArr = [];
                this.form.foodClass.forEach(item => {
                    this.foodClassList.forEach(it => {
                        if (it.value == item) {
                            foodClassArr.push(it)
                        }
                    })
                })
                selectbydish({
                    type: type,
                    screenStatus: 0,
                    dishName: this.leftFoodName,
                    flavour: type == 0 ? flavourArr : null,
                    kind: type == 0 || type == 1 ? kindArr : null,
                    tuletype: tuletypeArr,
                    foodClass: type == 0 ? foodClassArr : null,
                }).then((res) => {
                    this.loading = false;
                    if (res.retCode == 2000) {
                        cancelAnimationFrame(this.handlerId);
                        this.data = []
                        // this.data = res.data;
                        this.renderOptimization(
                            res.data.records || res.data,
                            "data",
                            "handlerId"
                        );
                        resolve();
                    }
                });
            });
        },
        // 获取点菜数据
        selectbyCommentDishApi(type = 0) {
            this.data = []
            // this.loading = true;
                let flavourArr = [];
                this.form.flavour.forEach(item => {
                    this.flavourList.forEach(it => {
                        if (it.value == item) {
                            flavourArr.push(it)
                        }
                    })
                })
                let kindArr = [];
                this.form.kind.forEach(item => {
                    this.kindList.forEach(it => {
                        if (it.value == item) {
                            kindArr.push(it)
                        }
                    })
                })
                let tuletypeArr = [];
                this.form.tuletype.forEach(item => {
                    this.tuletypeList.forEach(it => {
                        if (it.value == item) {
                            tuletypeArr.push(it)
                        }
                    })
                })
                let foodClassArr = [];
                this.form.foodClass.forEach(item => {
                    this.foodClassList.forEach(it => {
                        if (it.value == item) {
                            foodClassArr.push(it)
                        }
                    })
                })
            return new Promise((resolve) => {
                selectbyCommentDish({
                    current: -1,
                    size: -1,
                    dateType: this.orderTime,
                    type: type,
                    screenStatus: 0,
                    dishName: this.leftFoodName,
                    flavour: type == 0 ? flavourArr : null,
                    kind: type == 0 || type == 1 ? kindArr : null,
                    tuletype: tuletypeArr,
                    foodClass: type == 0 ? foodClassArr : null,
                }).then(res => {
                    this.loading = false
                    if (res.retCode == 2000) {
                        cancelAnimationFrame(this.handlerId);
                        this.data = []
                        this.renderOptimization(
                            res.data.records || res.data,
                            "data",
                            "handlerId"
                        );
                        resolve();
                    }
                })
            })
        },
        // 将返回的数据切割为一个数组
        averageFn(arrList) {
            let i = 0;
            let result = [];
            while (i < arrList.length) {
                result.push(arrList.slice(i, i + 10));
                i = i + 10;
            }
            return result;
        },
        // 创建添加数据方法
        renderOptimization(dataList, data, handlerId) {
            let twoArrayList = this.averageFn(dataList);
            console.log(twoArrayList);
            const renderFuc = currentIndex => {
                if (currentIndex > twoArrayList.length - 1) {
                    cancelAnimationFrame(this.handlerId);
                    return;
                }
                console.log(this[data]);
                this[handlerId] = requestAnimationFrame(() => {
                    this[data] = [...this[data], ...twoArrayList[currentIndex]];
                    currentIndex = currentIndex + 1;
                    renderFuc(currentIndex);
                });
            };
            renderFuc(0);
        },
        // 重置
        resetData(all = true) {
           
            if (all) {
                this.foodClassList = [];
                this.tuletypeList = [];
                this.kindList = [];
                this.flavourList = [];
                this.dishminuteList = [];
                this.colourList = [];
            }
            this.form = {
                foodClass: [],
                tuletype: [],
                kind: [],
                flavour: [],
                dishminute: [],
                colour: []
            }
            this.leftFoodName = "";
            if (this.showOrderingData) {
                this.selectbyCommentDishApi()
          
            } else {
                this.selectbydishApi()
            }
        },
        // 点击表单
        clickTabs(name) {
            this.data = []
            cancelAnimationFrame(this.handlerId);
            this.selectdishtypeattributeApi(name);
        },
        addDishes(item) {
            item.id = 0;
            console.log(item);
            let index = Math.floor(Math.random() * 7);
            let index2 = Math.floor(Math.random() * 3);
            let Aitem = this.$cu.deepClone(item);
            Aitem.week = this.weeksArr[index];
            Aitem.mealTimes = this.mealTimesArr[index2];
            this.rightData.unshift(Aitem)
        },
        aiCreat() {
            this.rightData.forEach((item, index) => {
                let aIdx = Math.floor(Math.random() * 7);
                let bIdx = Math.floor(Math.random() * 3);
                this.$set(this.rightData[index], 'week', this.weeksArr[aIdx]);
                this.$set(this.rightData[index], 'mealTimes', this.mealTimesArr[bIdx]);
            })
        },
        saveBtn() {
            this.loading = true;
            return new Promise((resolve) => {
                saveOrderDishs(this.rightData).then((res) => {
                    this.loading = false
                    if (res.retCode == 2000) {
                        this.$Message.success("点菜数据保存成功.");
                        setTimeout(() => {
                            let list = localStorage.getItem("tagNaveList") ? JSON.parse(localStorage.getItem("tagNaveList")) : []
                            list.forEach((item, index) => {
                                if (item.name == '点菜') {
                                    list.splice(index, 1)
                                }
                            });
                            this.setTagNavList(list)
                            this.$router.push({
                                path: `/view/createCookbook/orderDishesList`,

                            })
                        }, 1000);
                        resolve();
                    }
                });
            });
        }
    },
};
</script>
<style lang="less" scoped>
/deep/.ivu-tabs-bar {
    margin-bottom: 0;
}

.demo-tabs-style1 {
    box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.1600);
}

.demo-tabs-style1>.ivu-tabs-card>.ivu-tabs-content {
    margin-top: -16px;
}

.demo-tabs-style1>.ivu-tabs-card>.ivu-tabs-content>.ivu-tabs-tabpane {
    background: #fff;
    padding: 20px;
}

/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 2px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.4);
}

.content {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    &-bottom {
        flex: 1;
        margin-top: 20px;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1600) !important;
        display: flex;
        justify-content: space-between;

        &-item {
            flex: 1;
            background: #FFFFFF;
            padding: 20px 20px 0 20px;
            border-radius: 6px;
            box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
        }
    }

    // background: #FFFFFF;
}

.typeName {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}

.btnBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    &-left {
        display: flex;
        align-items: center;
    }

    &-right {
        display: flex;
        align-items: center;
    }
}

.dishesBox {
    border: 1px solid #d7dde4;
    border-radius: 4px;
    padding: 10px;
}

.table {
    width: 100%;
    display: flex;
    border: 1px solid #d7dde4;
    height: 40px;
    background: #f8f8f9;
    font-weight: bold;

    &-item {
        flex: 1;
        border-right: 1px solid #d7dde4;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-itemTitle {
        font-size: 14px;
        font-weight: bold;
    }
}

.noBr {
    border-right: none !important;
}
</style>
